<template>
    <div>
        <el-popover v-model="cronPopover">
            <cron v-model="iconValue" @change="changeCron" @close="cronPopover=false" i18n="en"></cron>
            <el-input slot="reference" @click="cronPopover=true" v-model="iconValue" placeholder="请输入定时策略"></el-input>
        </el-popover>
    </div>
</template>

<script>
    import Cron from './index.vue';
    export default {
        name: "cron-input",
        model: {
            prop: 'value',
            event: 'update'
        },
        props: {
          value: {
              type: String,
              default: '* * * * * ? *'
          }
        },
        components: {
            Cron
        },
        data() {
            return {
                cronPopover: false,
                iconValue: '* * * * * ? *'
            };
        },
        methods: {
            changeCron(val){
                this.value = val
            },
            setCron(newValue) {
                if (!newValue || newValue.trim().length < 11) {
                    this.$message.error('格式错误');
                    return;
                }
                this.iconValue = newValue
            }
        },
        watch: {
            value(val) {
                this.setCron(val);
            }
        },
        created() {
            this.setCron(this.value);
        }
    }
</script>
